<template>
    <div class="money">
        <!-- 搜索行 -->
        <el-form :inline="true" class="monry-form">

            <el-input v-model="name" placeholder="老师姓名" />
            <el-select v-model="type" placeholder="处理类型">
                <el-option label="全部" value="all" />
                <el-option label="收入" value="1" />
                <el-option label="提现" value="0" />
            </el-select>

            <div class="demo-date-picker">
                <div class="block">
                    <el-date-picker @change="fn1" value-format="x" v-model="value1" type="daterange" range-separator="--"
                        start-placeholder="开始日期" end-placeholder="结束日期" size="default" />
                </div>
            </div>
            <el-button type="primary" :icon="Search" style="margin-left: 30px; @" @click="toSerch">搜索</el-button>
        </el-form>

        <!-- 表格行 -->
        <div class="main">
            <el-table :data="tableDataFittler?.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :border="true"
                style="width: 100%" class="student-data" :header-cell-style="{
                    background: '#ecf7ff',
                    color: '#666666',
                    fontWeight: '600',
                    fontSize: '16px',
                }">
                <el-table-column prop="id" label="序号" width="100" />
                <el-table-column prop="name" label="老师" width="140" />
                <el-table-column prop="Last" label="处理类型" width="200">

                    <template #default="{ row }">
                        <el-tag type="warning" v-if="row.Last == '0'">提现</el-tag>
                        <el-tag v-else="row.Last == '1'">收入</el-tag>
                    </template>

                </el-table-column>
                <el-table-column prop="money" label="处理金额" width="200">

                    <template #default="{ row }">
                        <el-tag type="warning" v-if="row.Last == '0'">{{ row.money }}</el-tag>
                        <el-tag v-else="row.Last == '1'">{{ row.money }}</el-tag>
                    </template>

                </el-table-column>
                <el-table-column prop="moneys" label="处理前金额" width="200" />
                <el-table-column prop="after" label="处理后金额" width="200">

                    <template #default="{ row }">
                        <el-tag type="warning" v-if="row.Last == '0'">{{ row.after }}</el-tag>
                        <el-tag v-else="row.Last == '1'">{{ row.after }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="申请时间">
                    <template #default="{ row }">
                        <span>{{ dayjs.unix(row.time).format('YYYY-MM-DD') }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <el-pagination layout="prev, pager, next" :total="totalSize" :page-size="pageSize" :current-page="currentPage"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" class="pagination-box">
        </el-pagination>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getMoney } from '../../api/user';
import dayjs from 'dayjs';

const name = ref('')
const type = ref('all')
const currentPage = ref(1)
const pageSize = ref(10)
const value1 = ref('')
const tableData = ref([])
const tableDataFittler = ref([])
const maxTime = ref(null)
const minTime = ref(null)

const totalSize = computed(() => {
    return tableDataFittler.value?.length
})

const handleSizeChange = (val) => {
    pageSize.value = val
}

const handleCurrentChange = (val) => {
    currentPage.value = val
}

// 获取时间选择器选择的值
const fn1 = (timer) => {
    minTime.value = timer[0] / 1000
    maxTime.value = timer[1] / 1000
}

const fetchData = async () => {
    tableData.value = await getMoney()
    tableDataFittler.value = tableData.value
}

const toSerch = () => {
    // 初始状态，直接赋值即可
    if (!name.value && type.value == "all" && !minTime.value && !maxTime.value) {
        tableDataFittler.value = tableData.value
        return
    }
    // 数据筛选
    tableDataFittler.value = tableData.value.filter((item) => {
        return ((name.value ? item.name.includes(name.value) : "false") && (type.value == "all" ? "false" : (item.Last == type.value)) && (minTime.value ? (item.time > minTime.value && item.time < maxTime.value) : "false"))
    })
}

onMounted(() => {
    fetchData()
})

</script>

<style lang="scss" scoped>
.money {
    padding: 16px;
}

.monry-form {
    display: flex;
    width: 800px;
    justify-content: space-evenly;
    align-items: center;
    margin: 20px 0;
}

:deep(.el-table .el-table__cell) {
    text-align: center;
}

:deep(.el-input) {
    width: 150px;
    margin-right: 20px;
}

.pagination-box {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
</style>
